{% extends 'layout/base.html' %}
{% load static %}
{% block title %}文章归档 | {% endblock %}
{% block banner %}
	<div class="bg-cover index-back pd-header about-cover">
		<div class="container">
		{% include 'layout/banner.html' %}
		</div>
	</div>
{% endblock %}

{% block contents %}
	<main class="content" style="min-height: 783px;">
		<div class="container archive-calendar">
			<div class="card">
				<div id="post-calendar" class="card-content" _echarts_instance_="ec_1583720716602"
				     style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
					<div style="position: relative; overflow: hidden; width: 772px; height: 177px; padding: 0px; margin: 0px; border-width: 0px; cursor: pointer;">
						<canvas data-zr-dom-id="zr_0" width="1544" height="354"
						        style="position: absolute; left: 0px; top: 0px; width: 772px; height: 177px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
					</div>
					<div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgb(85, 85, 85); border-width: 1px; border-color: rgb(119, 119, 119); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px sans-serif; padding: 10px; left: 552px; top: 105px; pointer-events: none;">
						<div style="font-size: 14px;">2020-02-16：0</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
		<script type="text/javascript">
            let myChart = echarts.init(document.getElementById('post-calendar'));
            let option = {
                title: {
                    top: 0,
                    text: '文章日历',
                    left: 'center',
                    textStyle: {
                        color: '#3C4858'
                    }
                },
                tooltip: {
                    padding: 10,
                    backgroundColor: '#555',
                    borderColor: '#777',
                    borderWidth: 1,
                    formatter: function (obj) {
                        var value = obj.value;
                        return '<div style="font-size: 14px;">' + value[0] + '：' + value[1] + '</div>';
                    }
                },
                visualMap: {
                    show: true,
                    showLabel: true,
                    categories: [0, 1, 2, 3, 4],
                    calculable: true,
                    inRange: {
                        symbol: 'rect',
                        color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
                    },
                    itemWidth: 12,
                    itemHeight: 12,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: 0
                },
                calendar: [{
                    left: 'center',
                    range: ["{{ begin }}", "{{ end }}"],
                    cellSize: [13, 13],
                    splitLine: {
                        show: false
                    },
                    itemStyle: {
                        color: '#196127',
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    yearLabel: {
                        show: false
                    },
                    monthLabel: {
                        nameMap: 'cn',
                        fontSize: 11
                    },
                    dayLabel: {
                        formatter: '{start}  1st',
                        nameMap: 'cn',
                        fontSize: 11
                    }
                }],
                series: [{
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    calendarIndex: 0,
                    data: {{ date_list | safe }}
                }]

            };
            myChart.setOption(option);
		</script>

		<div id="cd-timeline" class="container">
			{% for articles in all_articles.object_list %}
				<div class="cd-timeline-block">
					<div class="cd-timeline-img year aos-init aos-animate" data-aos="zoom-in-up">
						<span>{{ articles.add_time | date:"Y" }}</span>
					</div>

					<div class="cd-timeline-img month aos-init aos-animate" data-aos="zoom-in-up">
						<span>{{ articles.add_time | date:"m" }}</span>
					</div>

					<div class="cd-timeline-img day aos-init aos-animate" data-aos="zoom-in-up">
						<span>{{ articles.add_time | date:"d" }}</span>
					</div>
					<article class="cd-timeline-content aos-init aos-animate" data-aos="fade-up">
						<div class="article col s12 m6">
							<div class="card">
								<a href="../article/{{ articles.id }} ">
									<div class="card-image">

										<img src="{{ articles.cover }}" class="responsive-img"
										     alt="{{ articles.title }}">

										<span class="card-title">{{ articles.title }}</span>
									</div>
								</a>
								<div class="card-content article-content">
									<div class="summary block-with-text">
										{{ articles.desc }}
									</div>
									<div class="publish-info">
                                <span class="publish-date">
                                    <i class="far fa-clock fa-fw icon-date"></i>{{ articles.add_time }}
                                </span>
										{{ articles.category }}
										<span class="publish-author">
                                    <i class="fas fa-bookmark fa-fw icon-category"></i>
                                    <a href="{% url 'article_category' articles.category_id %} " class="post-category">
                                    {{ articles.category }}
                                    </a>
                                </span>
									</div>
								</div>

								<div class="card-action article-tags">
									{% for tag in  articles.tag.all %}
										<a href="{% url 'article_tag' tag.id %}">
											<span class="chip tag-color">{{ tag }}</span>
										</a>
									{% endfor %}
								</div>
							</div>
						</div>
					</article>
				</div>
			{% endfor %}
		</div>

	</main>
{% endblock %}

{% block pagination %}
	<div class="container paging">
		<div class="row">
			<div class="col s6 m4 l4">
				{% if all_articles.has_previous %}
					<a href="?{{ all_articles.previous_page_number.querystring }}"
					   class="left btn-floating btn-large waves-effect waves-light left-color"/>
				{% else %}
					<a class="left btn-floating btn-large disabled"/>
				{% endif %}
				<i class="fas fa-angle-left"></i>
				</a>
			</div>


			<div class="page-info col m4 l4 hide-on-small-only">
				<div class="center-align b-text-gray">{{ all_articles.number }} / {{ all_articles.pages | last }}</div>
			</div>

			<div class="col s6 m4 l4">
				{% if all_articles.has_next %}
					<a href="?{{ all_articles.next_page_number.querystring }}"
					   class="right btn-floating btn-large waves-effect waves-light right-color"/>
				{% else %}
					<a class="right btn-floating btn-large disabled">
				{% endif %}
				<i class="fas fa-angle-right"></i>
				</a>
			</div>

		</div>
	</div>
{% endblock %}